import React from 'react';
import { Breadcrumb, Form, Row, Col, Input, Button, Table, message } from 'antd';
import { Link } from 'react-router-dom';
import http from '../../http';
const { Column } = Table;
class Order extends React.Component {
    constructor(props) {
        super(props);
        this.state = { 
            orderList: [],
            pagination: {
                total: 1,
                pageSize: 10,
                pageNum: 1
            },
            inpValue: ''
        }
    }
    orderList = (pageSize,pageNum) => { //商品列表
        http.get('/api/manage/order/list.do?pageSize='+pageSize+'&pageNum='+pageNum).then(res => {
            this.setState({
                orderList: res.data.list,
                pagination: {
                    total: res.data.total,
                    pageSize: res.data.pageSize,
                    pageNum: res.data.pageNum
                }
            })
        })
    }
    handelChange = (e) =>{ //获取搜索框内容
        e.persist();
        this.setState({
            inpValue: e.target.value
        })
    }
    search = (pageSize,pageNum,inpValue) => { //搜索
        if (inpValue === '') {
            this.orderList(pageSize,pageNum)
        }else {
            http.get('/api/manage/order/search.do?orderNo='+inpValue).then(res => {
                message.error(res.msg)
            })
        }
    }
    clearInpt = () => { //清空搜索框
        this.myInput.focus()
        this.myInput.state.value = ''
    }
    changePage = (page) => { //分页
        if (this.state.inpValue === '') {
            this.orderList(page.pageSize,page.current)
        }else {
            this.search(page.pageSize,page.current,this.state.inpValue)
        }
    }
    toDetail = (orderNo) => { //跳转到订单详情
        this.props.history.push(`/main/orderdetail/${orderNo}`)
    }
    componentDidMount() {
        const {pageSize,pageNum} = this.state.pagination
        this.orderList(pageSize,pageNum)
    }
    render() { 
        const {pageSize,pageNum} = this.state.pagination
        const {orderList,inpValue,pagination} = this.state
        return ( 
            <div className='order'>
                <div className='breadcrumb-con'>
                    <Breadcrumb>
                        <Breadcrumb.Item>
                            <Link to="/main/home">首页</Link>
                        </Breadcrumb.Item>
                        <Breadcrumb.Item>订单</Breadcrumb.Item>
                        <Breadcrumb.Item>订单管理</Breadcrumb.Item>
                    </Breadcrumb>
                    <h2>订单管理</h2>
                </div>
                <div className='shop-con'>
                    <Form
                        className="ant-advanced-search-form"
                    >
                        <Row style={{ 'margin-left': '-12px', 'margin-right': '-12px' }}>
                            <Col span={8} style={{ 'padding-left': '12px', 'padding-right': '12px' }}>
                                <Form.Item label="订单号" labelCol={{ span: 4 }}>
                                    <Input id='productName' onChange={this.handelChange} onPressEnter={()=>this.search(pageSize,pageNum,inpValue)} ref={myInput=>this.myInput=myInput}/>
                                </Form.Item>
                            </Col>
                            <Col span={8} offset={8} style={{ 'padding-left': '12px', 'padding-right': '12px', 'text-align': 'right' }}>
                                <Button type="primary" htmlType="submit" onClick={()=>this.search(pageSize,pageNum,inpValue)}>搜索</Button>
                                <Button style={{ marginLeft: 8 }} onClick={this.clearInpt}>清空</Button>
                            </Col>
                        </Row>
                    </Form>
                    <Table dataSource={orderList} rowKey={record => record.id} pagination={pagination} onChange={this.changePage}>
                        <Column title="订单号" dataIndex="orderNo" key="orderNo" />
                        <Column title="收件人" dataIndex="receiverName" key="receiverName" />
                        <Column
                            title="订单状态"
                            dataIndex="statusDesc"
                            key="statusDesc"
                            render={(text) => (
                                <span>{text}</span>
                            )}
                        />
                        <Column title="订单总价" dataIndex="payment" key="payment"
                            render={text => (
                                <span>￥{text}</span>
                            )}
                        />
                        <Column title="创建时间" dataIndex="createTime" key="createTime"
                            render={text => (
                                <span>{text}</span>
                            )}
                        />
                        <Column title="操作"
                            render={(text,record) => (
                                <div>
                                    <a onClick={()=>this.toDetail(record.orderNo)}>查看详情</a>
                                </div>
                            )}
                        />
                    </Table>
                </div>
            </div>
        );
    }
}
 
export default Order;